<template>
  <div class="app-container">
    <el-form ref="form" size="mini" label-width="200px">
      <template v-for="cell in cells">
        <el-form-item
          :hidden="cell.ro"
          :label="cell.name"
          v-if="cell.ct == 'date'"
          :key="cell.col"
        >
          <el-date-picker
            type="date"
            style="width: 100%"
            placeholder="选择日期"
            v-model="cell.val"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>

        <el-form-item
          :hidden="cell.ro"
          :label="cell.name"
          v-else-if="cell.ct == 'switch'"
          :key="cell.col"
        >
          <el-checkbox v-model="cell.value"></el-checkbox>
        </el-form-item>

        <el-form-item
          :hidden="cell.ro"
          v-else
          :label="cell.name"
          :key="cell.col"
        >
          <el-input v-model="cell.val"></el-input>
        </el-form-item>
      </template>

      <el-form-item>
        <el-button type="primary"> 提交 </el-button>
        <el-button @click="onCancel"> 取消 </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped>
.el-form-item {
  width: 80%;
}
</style>
  <script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component({
  name: "editor",
})
export default class extends Vue {
  private cells = [
    {
      col: "id",
      name: "编号",
      val: "",
      ro: false,
      rq: false,
      ct: "date",
    },
    {
      col: "name",
      name: "姓名",
      val: "",
      ro: false,
      rq: false,
      ct: "",
    },
    {
      col: "sw1",
      name: "选中",
      val: "",
      ro: false,
      rq: false,
      ct: "switch",
    },
  ];

  private onCancel() {
    this.$router.go(-1)
  }
}
</script>